import React from 'react'
import { Form, Row, Button, Select, Input, Col } from 'antd';
const FormItem = Form.Item;
const { Option } = Select
const SearchForm = ({ form: { getFieldDecorator, getFieldsValue }, onSearch }) => {
  const formItemLayout = {
    // 抽屉里面Form。二列的布局比例
    labelCol: {
      span: 6
    },
    wrapperCol: {
      span: 16
    }
  };
  return (
    <Form className="search-form">
      <Row gutter={24}>
        <Col span={6}>
          <FormItem label='屏幕名称:'{...formItemLayout}>
            {getFieldDecorator('screenName')(
              <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={60}></Input>
            )}
          </FormItem>
        </Col>
        <Col span={6} style={{ display: 'flex' }} className="serarch-btns">
          <FormItem>
            <Button type="primary" onClick={() => onSearch(getFieldsValue())} icon="search">
              {'查询'}
            </Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
  )
};
export default Form.create()(SearchForm);